<template>
  <div>
    <el-dialog v-bind="dialogProps" :before-close="handleClose" :close-on-click-modal="false"
               :destroy-on-close="true" v-dialogDrag>
      <el-form :model="ruleForm" ref="ruleForm" label-width="120px" class="demo-ruleForm"
               size="small">
        <el-row :gutter="16" justify="start">
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="单位:" prop="xsmc">
              <el-select v-model="ruleForm.xsmc" placeholder="---请选择---" clearable style="width: 100%">
                <el-option v-for="item in zxoptions" :key="item.value" :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="任务名称:" prop="xsmc">
              <el-input v-model="ruleForm.xsmc" placeholder="请输入任务名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="缺陷隐患名称:" prop="xsmc">
              <el-input v-model="ruleForm.xsmc" placeholder="请输入缺陷隐患名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="站线名称:" prop="xsmc">
              <el-input v-model="ruleForm.xsmc" placeholder="请输入站线名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="班组名称:" prop="xsmc">
              <el-input v-model="ruleForm.xsmc" placeholder="请输入班组名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="设备名称:" prop="xsmc">
              <el-input v-model="ruleForm.xsmc" placeholder="请输入设备名称" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="发现日期:" prop="jhjssj">
              <el-date-picker v-model="ruleForm.jhjssj" type="date" style="width:100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <div style="text-align: center;">
              <el-button type="primary" @click="handleQuery()" :size="size"><i class="fa fa-search"
                                                                               style="padding-right:5px"></i>查询
              </el-button>
              <el-button @click="handleReset()" :size="size" type="primary"><i class="fa fa-reply"
                                                                               style="padding-right:5px"></i>重置
              </el-button>
            </div>
          </el-col>

        </el-row>

      </el-form>
      <vxe-table border stripe ref="selectedEquip" height="400"
                 :data="list.data">
        <vxe-column type="seq" title="序号" width="60" align="center"></vxe-column>
        <vxe-column type="checkbox" width="60" align="center"></vxe-column>
        <vxe-column field="methodName" title="单位名称" align="center" minWidth="150"></vxe-column>
        <vxe-column field="methodName" title="任务名称" align="center" minWidth="150"></vxe-column>
        <vxe-column field="methodName" title="缺陷隐患名称" align="center" minWidth="150"></vxe-column>
        <vxe-column field="methodName" title="设备名称" align="center" minWidth="150"></vxe-column>
        <vxe-column field="methodName" title="缺陷级别" align="center" minWidth="150"></vxe-column>
        <vxe-column field="methodName" title="详细明细" align="center" minWidth="150"></vxe-column>
        <vxe-column field="methodName" title="问题分类" align="center" minWidth="150"></vxe-column>
        <vxe-column field="methodName" title="隐患类型" align="center" minWidth="150"></vxe-column>
        <vxe-column field="methodName" title="站线名称" align="center" minWidth="150"></vxe-column>
        <vxe-column field="methodName" title="站线类型" align="center" minWidth="150"></vxe-column>
        <vxe-column field="methodName" title="发现班组" align="center" minWidth="150"></vxe-column>
        <vxe-column field="methodName" title="发现人" align="center" minWidth="150"></vxe-column>
        <vxe-column field="methodName" title="发现日期" align="center" minWidth="150"></vxe-column>

      </vxe-table>


      <span slot="footer" class="dialog-footer" v-if="footerVisible">
                <el-button @click="handleCancel()" :size="size" icon="fa fa-minus-square-o">取消</el-button>
                <el-button type="primary" @click="handleSubmit()" :size="size"
                           icon="fa fa-save (alias)">确定</el-button>
            </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      dialogProps: {
        visible: false,
        title: "新增",
        width: "80%",
        top: "10px",
      },
      footerVisible: true,
      size: "medium",
      ruleForm: {
        xsmc: '',
        jhjssj: ''

      },
      zxoptions: [],
      xsnrShow: true,
      list: {
        data: []
      },
      row: {}
    };
  },
  methods: {
    showDialog() {

      this.dialogProps.visible = true;
    },
    //查询
    handleQuery() {

    },
    //重置
    handleReset() {

    },
    //确定
    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.handleCancel()
          this.dialogProps.visible = false;
        } else {
          return false;
        }
      });

    },
    //取消
    handleCancel() {
      this.$refs.ruleForm.resetFields()
      // for (const k in this.form.data) {
      //   this.form.data[k] = ''
      // }
      this.list = {
        data: [],
      }
      this.row = {}
      this.dialogProps.visible = false;
    },
    //确定关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.handleCancel()
          this.dialogProps.visible = false;
        })
        .catch((_) => {
        });
    },
  },
};
// 创建一个简单的超链接渲染
</script>
<style>
.el-dialog__footer {
  width: 100%;
  border-top: 1px solid #e8e8e8;
}

</style>
